<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<!-- react核心语法库 用来为react提供语法 -->
<script src="../react.js"></script>
<!-- react dom操作库 用来将虚拟dom转化为真实dom渲染到页面 -->
<script src="../react-dom.js"></script>
<script>
    // 使用js 创建div ul li
    // let div = document.createElement("div");
    // console.dir(div)
    // document.body.append(div);
    // let ul = document.createElement("ul");
    // console.dir(ul)
    // div.append(ul)
    // let li = document.createElement("li");
    // li.textContent="好好学习天天向上";
    // ul.append(li)

    /* 
    虚拟dom:

        使用原生js对象描述节点,这个对象中的属性是有限的
    
    */


    /* 
     标签分为三部分：标签名、属性、内容
    */

    console.log(React)
    let li = React.createElement("li",{className:'red',id:"box"},"好好学习天天向上");
    let li1 = React.createElement("li",{userId:110},"学习使我快乐")
    let ul = React.createElement("ul",null,li,li1)
    // 1.使用react创建虚拟DOM 参数一 标签名， 参数二 标签属性（是对象）， 参数三 标签内容
    let div = React.createElement("div",null,ul)
    console.log(div)
    console.log(ReactDOM)
    
    // 2，将虚拟dom转化为真实dom并渲染到容器中 参数一 要渲染的虚拟dom 参数二将节点渲染到哪个dom中
    ReactDOM.render(div,document.getElementById("root"))
    // console.log("渲染中")
</script>
</html>